<template>
  <Content>
    <div class="btn">
      <el-button
        size="small"
        icon="el-icon-upload2"
        type="primary"
        plain
        @click="handleUp"
        >上传清算日历</el-button
      >
      <el-button
        size="small"
        icon="el-icon-download"
        type="primary"
        plain
        @click="handleDown"
        >模板下载</el-button
      >
    </div>
    <div class="search">
      <el-form
        label-position="right"
        label-width="80px"
        :model="searchForm"
        size="small"
      >
        <el-row>
          <el-col :span="5">
            <el-form-item label="清算日期:">
              <el-date-picker
                v-model="searchForm.belongYear"
                type="year"
                value-format="YYYY"
                placeholder="请选择年份"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <SearchBtn
            ref="searchRef"
            @handleSearch="handleSearch"
            @handleRest="handleRest"
          />
        </el-row>
      </el-form>
    </div>
    <div class="table">
      <el-table
        height="600"
        :data="tableData"
        stripe
        style="width: 100%"
        row-key="id"
      >
        <el-table-column prop="belongYear" label="所属年份" width="80">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="150">
        </el-table-column>
        <el-table-column prop="uploadDate" label="上传日期"> </el-table-column>
        <el-table-column prop="author" label="作者" width="80">
        </el-table-column>
        <el-table-column prop="periodValidityStart" label="有效期">
          <template #default="record">
            <span>
              {{ dateToYear(record.row.periodValidityStart) }}
              -
              {{ dateToYear(record.row.periodValidityEnd) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="explain" label="说明"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="edit" label="操作">
          <template #default="record">
            <div>
              <el-button
                type="text"
                size="small"
                @click="handleExport(record.row.id)"
                >导出</el-button
              >
              <span style="padding: 0 5px">|</span>
              <el-popover placement="top" :width="160" trigger="hover">
                <p>确定作废吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text">取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleDelete(record.row)"
                    >确定</el-button
                  >
                </div>
                <template #reference>
                  <el-button type="text" size="small">作废</el-button>
                </template>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <component :is="modelName" @handleClose="handleClose"> </component>
  </Content>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { dateToYear, pagingConfig } from '@/assets/common'
import Content from 'components/common/Content.vue'
import SearchBtn from 'components/common/SearchBtn.vue'
import ImportCalendar from '@/views/basicData/cpn/ImportCalendar.vue'
import { hyRequest } from '@/service'
import { ElMessage } from 'element-plus'
import { sortTable } from '@/utils/hooks/tableSort'
import { dropCol } from './config/index'

interface Record {
  id: number
  status: number
}
export default defineComponent({
  name: 'BasicData',
  components: {
    Content,
    SearchBtn,
    ImportCalendar
  },
  setup() {
    const searchRef = ref<InstanceType<typeof SearchBtn>>()
    const modelName = ref('')
    // region 初始化参数
    const searchForm = reactive({
      belongYear: '',
      page: 1,
      size: 20
    })
    // endregion

    // region 点击 重置 查询
    let tableData = ref([])
    const handleSearch = () => {
      hyRequest
        .get({
          url: '/asm/base/clearingCalendar/calendarQueryPage',
          params: searchForm
        })
        .then((res: any) => {
          pagingConf.total = res.data.total
          pagingConf.pageSize = res.data.size
          pagingConf.currentPage = res.data.page
          tableData.value = res.data.records
        })
        .finally(() => {
          searchRef.value?.handleCloseLoading()
          // searchRef.value?.isLoading = false
        })
    }
    const handleRest = () => {
      searchForm.belongYear = ''
      searchForm.page = 1
      searchForm.size = 20
      handleSearch()
    }
    // endregion

    // region 拖拽
    const dropColArr = ref(dropCol)
    sortTable(tableData, dropColArr)
    // endregion

    // region 分页
    const handleSizeChange = (val: number) => {
      searchForm.size = val
      handleSearch()
    }
    const handleCurrentChange = (val: number) => {
      searchForm.page = val
      handleSearch()
    }
    const pagingConf = reactive({
      ...pagingConfig
    })
    // endregion

    // region 导出
    const handleExport = (id: number) => {
      hyRequest.postDown(
        {
          url: '/asm/base/clearingCalendar/exportCalendar',
          data: { id }
        },
        '清算日历表.xlsx'
      )
    }
    // endregion

    // region 作废
    const visible = ref(false)
    const handleDelete = (record: Record) => {
      hyRequest
        .post({
          url: '/asm/base/clearingCalendar/cancellation',
          data: { id: record.id, status: record.status }
        })
        .then((res: any) => {
          ElMessage.success({
            message: res.message,
            type: 'success'
          })
          visible.value = false
          handleSearch()
        })
        .catch((err: any) => {
          ElMessage.error({
            message: err.message,
            type: 'error'
          })
        })
    }
    // endregion

    // region 模板下载
    const handleDown = () => {
      hyRequest.postDown(
        {
          url: '/asm/base/clearingCalendar/downloadTemplate'
        },
        '清算日历模板.xlsx'
      )
    }
    // endregion

    // region 上传清算日历
    const handleUp = () => {
      modelName.value = 'ImportCalendar'
    }
    const handleClose = (isFlag: boolean) => {
      modelName.value = ''
      if (isFlag) handleSearch()
    }
    // endregion
    return {
      searchRef,
      searchForm,
      tableData,
      visible,
      dropColArr,
      modelName,
      handleUp,
      handleClose,
      dateToYear,
      handleDown,
      handleSearch,
      handleRest,
      handleSizeChange,
      handleCurrentChange,
      handleDelete,
      handleExport,
      ...toRefs(pagingConf)
    }
  }
})
</script>

<style scoped lang="less"></style>
